// import 'package:f_demo_two/components/shop_list.dart';
import 'package:flutter/material.dart';

class MyApp20 extends StatelessWidget {
  MyApp20({super.key});

  // 数据
  List navMap = [
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/58a7c1f62df4cb1eb47fe83ff0e566e6.png",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {"path": "pages/category/index", "url": "pages/category/index"}
      },
      "text": "新品首发"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/49c64dbbf449e9e8abfca314f92814bd.png",
      "imgName": "icon-2.jpg",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {"path": "pages/category/index", "url": "pages/category/index"}
      },
      "text": "居家生活"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/8573fbc5e87e8a88827e905fca284604.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "服饰鞋包"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/f01c5fc360f55c6053beec34913bc699.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "美食酒水"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/b106e9bd9e0c8c779e7d77a84e92ed93.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "个护清洁"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/fd3a573889671b924d89859f521c30c9.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "母婴亲子"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/8f979924a4fd3b5f406b62a6b405ea32.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "运动旅行"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/f7657720f79ea9f769c40608f369130e.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "数码家电"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/36f09e32efc53e1e695210ca92c54ed8.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "宠物生活"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/0cccdb31952fbf3bc0026efbe260e40e.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "每日抄底"
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // 导航条
        appBar: AppBar(
          title: const Text('CustomScrollView初体验',
              style: TextStyle(color: Colors.white, fontSize: 20)),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        // 主体区域
        body: CustomScrollView(
          slivers: [
            SliverGrid.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 5,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  childAspectRatio: 1),
              itemBuilder: (BuildContext context, int index) {
                return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: const Color.fromARGB(255, 235, 231, 231),
                    ),
                    alignment: Alignment.center,
                    child: Column(
                      children: [
                        Image.network(
                          navMap[index]['imgUrl'],
                          width: 40,
                          height: 40,
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                        Expanded(child: Text('${navMap[index]['text']}'))
                      ],
                    ));
              },
              itemCount: 10,
            ),
            // 3. 上下两部分的间距
            const SliverPadding(padding: EdgeInsets.only(bottom: 20)),
            // 4. 列表
            SliverList.builder(
              itemBuilder: (BuildContext context, int index) {
                return Container();
              },
              itemCount: 20,
            )
          ],
        ));
  }
}
